<script setup lang="ts">
import { onMounted, ref } from 'vue';

// 1.定义 ref
const pRef = ref(null)

// 3.onMounted 中获取
onMounted(() => {
    // onMounted 是最早可以获取到 dom 元素的生命周期函数
    console.log(pRef.value);
    
    // 获取某种标签的类型
    // document.querySelector('p')

    // 非空断言 + as 类型强转
    (pRef.value! as HTMLParagraphElement).style.backgroundColor = 'orange';
})
</script>


<template>
<div id="app">
<!-- 2. 设置给 dom 元素 -->
<!-- ref="xxx" xxx需要和定义的状态变量同名 -->
<p ref="pRef">隆江猪脚饭</p>
</div>
</template>


<style>

</style>